<!DOCTYPE html>
<html lang="en">
  <head>
    
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=1024px, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <title>Spina</title>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../css/reset.css" />
    <link rel="stylesheet" href="../../css/icons.css" />
    <link rel="stylesheet" href="../../css/formalize.css" />
    <link rel="stylesheet" href="../../css/checkboxes.css" />
    <link rel="stylesheet" href="../../css/sourcerer.css" />
    <link rel="stylesheet" href="../../css/jqueryui.css" />
    <link rel="stylesheet" href="../../css/tipsy.css" />
    <link rel="stylesheet" href="../../css/calendar.css" />
    <link rel="stylesheet" href="../../css/tags.css" />
    <link rel="stylesheet" href="../../css/fonts.css" />
    <link rel="stylesheet" href="../../css/main.css" />
    <link rel="stylesheet" media="all and (orientation:portrait)" href="../../css/portrait.css" />
    <link rel="apple-touch-icon" href="./apple-touch-icon-precomposed.png" />
    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon" />
    
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <![endif]-->
  <meta charset="UTF-8"></head>
  
  <body>

    <!-- Primary navigation -->
    <nav id="primary">
      <ul>
        <li >
          <a href="../../dashboard/index.html">
            <span class="glyph dashboard"></span>
            Dashboard
          </a>
        </li>
        <li >
          <a href="../../uielements/miscellaneous/index.html">
            <span class="glyph shuffle"></span>
            UI Elements
          </a>
        </li>
        <li class="active">
          <a href="./index.html">
            <span class="glyph pencil"></span>
            Forms
          </a>
        </li>
        <li >
          <a href="../../tables/tables/index.html">
            <span class="glyph listicon"></span>
            Tables
          </a>
        </li>
        <li >
          <a href="../../charts/linechart/index.html">
            <span class="glyph chart"></span>
            Charts
          </a>
        </li>
        <li class="bottom">
          <a href="../../login/index.html">
            <span class="glyph quit"></span>
            Log out
          </a>
        </li>
      </ul>
    </nav>
    
    <!-- Secondary navigation -->
    <nav id="secondary">
      <ul>
  <li class="active"><a href="./index.html">Forms</a></li>
  <li ><a href="../wysiwyg/index.html">WYSIWYG</a></li>
  <li ><a href="../wizard/index.html">Wizard</a></li>
</ul>
      
      <div id="notifications">
        <ul>
        </ul>
      </div>
    </nav>
    
    <section id="maincontainer">
      <div id="main">
      
      <div class="box">
  <div class="box-header">
    <h1>This is a box</h1>
    
    <ul>
      <li class="active"><a href="#one">Sample Form</a></li>
      <li><a href="#two">Tab two</a></li>
      <li><a href="#three">Active tab</a></li>
    </ul>
  </div>
  
  <div class="box-content">
    <div class="tab-content" id="one">
      
      <form action="/" method="post">
        
        <div class="column-left">
          <p>
            <input type="text" id="username" name="username" placeholder="Username" class="{validate:{required:true, minlength:3}}" />
          </p>
        
          <p class="combined">
            <input type="text" id="street" name="street" placeholder="Street" class="large" />
            <input type="text" id="number" name="number" placeholder="Number" class="small" />
          </p>
        
          <p>
            <input type="password" name="password" id="password" placeholder="Password" class="{validate:{required:true, minlength:6}}" />
          </p>
        
          <p>
            <input type="password" name="password_confirmfeef" id="password_confirm" placeholder="Confirm Password" class="{validate:{equalTo: '#password'}}" />
            <small>Please don't be a retard and use a <a href="#">secure</a> password</small>
          </p>
          
          <p>
            <select name="city" id="city" placeholder="City" class="{validate:{required:true}}">
              <option>Nijmegen</option>
              <option>Amsterdam</option>
            </select>
          </p>
          
          <p>
            <input type="file" id="file" name="file" placeholder="Profile picture" />
          </p>
          
          <p>
            <textarea id="tags" name="tags" class="taginput"></textarea>
          </p>
        </div>
      
        <div class="column-right">
          <p>
            <textarea id="textarea" name="textarea" class="{validate:{required:true}}">This is a textarea</textarea>
          </p>

          <div class="column-left">
            <p>
              <input type="checkbox" name="option1" id="option1" />
              <label for="option1">This is an option</label>
            </p>
            <p>
              <input type="checkbox" name="option1" id="option2" />
              <label for="option2">Another option</label>
            </p>
          </div>
          
          <div class="column-right">
            <p>
              <input type="checkbox" name="option3" id="option3" />
              <label for="option3">This is also an option</label>
            </p>
            <p>
              <input type="checkbox" name="option4" id="option4" />
              <label for="option4">Final option</label>
            </p>
          </div>
          
          <div class="clear"></div>
          
          <p>
            <input type="text" name="date" class="datepicker" id="date" placeholder="Date of Birth" class="{validate:{required:true}}" />
            <span class="icon calendar"></span>
          </p>
          
          <div class="column-left">
            <p>
              <input type="radio" name="radio" id="radio1" />
              <label for="radio1">This is an option</label>
            </p>
            <p>
              <input type="radio" name="radio" id="radio2" />
              <label for="radio2">Another option</label>
            </p>
          </div>
          
          <div class="column-right">
            <p>
              <input type="radio" name="radio" id="radio3" />
              <label for="radio3">This is also an option</label>
            </p>
            <p>
              <input type="radio" name="radio" id="radio4" />
              <label for="radio4">Final option</label>
            </p>
          </div>
          
          <div class="clear"></div>
          
          <p class="warning">
            Warning: This form consists solely of nonsense.
          </p>
          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis non orci congue mollis. Sed euismod magna sed nunc dignissim tincidunt. Maecenas faucibus varius elit.
          </p>
        </div>

        <div class="clear"></div>
        
        <div class="action_bar">
          <input type="submit" class="button blue" value="Submit Post" />
          <a href="#modal" class="modal button">Cancel</a>
        </div>
        
      </form>
      
    </div>
    
    <div class="tab-content" id="two">
      <p>This is the content of box two.</p>
    </div>
    
    <div class="tab-content" id="three">
      <p>This is the content of box three.</p>
    </div>
  </div>
</div>


<!-- Modal box -->
<div class="box" id="modal">
  <div class="box-header">
    <h1>Dit is een modal venster</h1>
  </div>
  
  <div class="box-content">
    <p>Blergh awesome.</p>
    
    <div class="action_bar">
      <a href="#" class="close button blue">Save changes</a>
      <a href="#" class="close button">Close modal</a>
    </div>
  </div>
</div>
      
      </div>
    </section>
  
    <!-- JavaScript -->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jqueryui.min.js"></script>
    <script src="../../js/jquery.cookies.js"></script>
    <script src="../../js/jquery.pjax.js"></script>
    <script src="../../js/formalize.min.js"></script>
    <script src="../../js/jquery.metadata.js"></script>
    <script src="../../js/jquery.validate.js"></script>
    <script src="../../js/jquery.checkboxes.js"></script>
    <script src="../../js/jquery.selectskin.js"></script>
    <script src="../../js/jquery.fileinput.js"></script>
    <script src="../../js/jquery.datatables.js"></script>
    <script src="../../js/jquery.sourcerer.js"></script>
    <script src="../../js/jquery.tipsy.js"></script>
    <script src="../../js/jquery.calendar.js"></script>
    <script src="../../js/jquery.inputtags.min.js"></script>
    <script src="../../js/jquery.wymeditor.js"></script>
    <script src="../../js/jquery.livequery.js"></script>
    <script src="../../js/jquery.highcharts.js"></script>
    
    <!-- Just examples, can be removed in production -->
      <script src="../../js/chart_examples.js"></script>
      
    <script src="../../js/application.js"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-11172759-15']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>